import { Card, Radio } from 'antd';
import { FormattedMessage, getLocale } from 'umi';
import React from 'react';
import { Area } from '@ant-design/charts';

const config = {
  xField: 'Date',
  yField: 'expendTime',
  xAxis: {
    type: 'dateTime',
  },
};
const SpeedNum = ({ loading, speeddata, speedType, handleChangeSpeedType }) => (
  <Card
    loading={loading}
    bordered={false}
    title={getLocale() === 'zh-CN' ? '耗时趋势' : 'Time consuming trend'}
    style={{
      height: '95%',
    }}
    extra={
      <div>
        <Radio.Group value={speedType} onChange={handleChangeSpeedType}>
          <Radio.Button value="1">
            {getLocale() === 'zh-CN' ? '近一个小时' : 'nearly one hour'}
          </Radio.Button>
          <Radio.Button value="2">
            {getLocale() === 'zh-CN' ? '近二个小时' : 'nearly two hour'}
          </Radio.Button>
          <Radio.Button value="3">
            {getLocale() === 'zh-CN' ? '近三个小时' : 'nearly three hour'}
          </Radio.Button>
        </Radio.Group>
      </div>
    }
  >
    <div>
      <Area {...config} data={speeddata} />
    </div>
  </Card>
);

export default SpeedNum;
